export default class ckLine {
  constructor(options) {
    var viewportwidth = 1200;
    var viewportHeight = 700;
    this.settings = Object.assign(
      {
        svgId: null,
        strokeColor: "#000",
        strokeWidth: 2,
        animateTime: 1000,
        interval: 600,
        fadeOutTime: 800,
        lifeTime: 2000,
        width: viewportwidth,
        height: viewportHeight,
        leftRight: true,
        easing: "swing",
        animationTimeRange: null
      },
      options
    );
    this.interval = null;
  }
  creatLine(width, height) {
    let settings = this.settings;
    var startItemsWidth = new Array(0, width),
      ramdomItemWidth =
        startItemsWidth[Math.floor(Math.random() * startItemsWidth.length)],
      startItemsHeight = new Array(0, height),
      ramdomItemHeight =
        startItemsHeight[Math.floor(Math.random() * startItemsHeight.length)];
    var svgns = "http://www.w3.org/2000/svg";
    var x1 = ramdomItemWidth,
      y1 = Math.random() * height,
      x2,
      y2 = Math.random() * height;
    var randomBool = true;
    if (settings.leftRight === false) {
      randomBool = Math.random() >= 0.5;
    }
    if (randomBool == true) {
      x1 = ramdomItemWidth;
      if (ramdomItemWidth === 0) {
        x2 = width;
      } else {
        x2 = 0;
      }
    } else {
      var range1 = Math.floor(Math.random() * width) + 0;
      var range2 = Math.floor(Math.random() * width) + 0;
      x1 = range1;
      x2 = range2;
      y1 = ramdomItemHeight;
      if (ramdomItemHeight === 0) {
        y2 = height;
      } else {
        y2 = 0;
      }
    }

    var line = document.createElementNS(svgns, "path");
    line.setAttributeNS(
      null,
      "d",
      "M " + x1 + "," + y1 + " L " + x2 + "," + y2
    );
    line.setAttributeNS(null, "stroke-width", settings.strokeWidth);
    line.setAttributeNS(null, "stroke", settings.strokeColor);
    line.setAttributeNS(null, "class", "line off");

    // 可以自己设置在哪个元素里面填充,
    // 如果不设置填充dom，则默认为body
    if (settings.svgId) {
      document.querySelector(settings.svgId).appendChild(line);
    } else {
      document.body.appendChild(line);
    }
    var length = line.getTotalLength();
    line.setAttributeNS(null, "stroke-dasharray", length);
    line.setAttributeNS(null, "stroke-dashoffset", length);
  }
  animate() {
    var settings = this.settings;
    var time = settings.animationTime;
    if (settings.animationTimeRange) {
      time = Math.floor(
        Math.random() *
          (settings.animationTimeRange[1] -
            settings.animationTimeRange[0] +
            1) +
          settings.animationTimeRange[0]
      );
    }

    document.querySelectorAll(".line.off").forEach(t => {
      console.log(t);
    });
  }

  begin() {
    const settings = this.settings;
    this.interval = setInterval(()=> {
      this.creatLine(settings.width, settings.height);
      this.animate();
    }, settings.interval);

    setTimeout(()=>{
      clearInterval(this.interval);
    },1000)
  }
}
